

<script>
import optionsItem from "./options";
export default {
  name: "FreeItem",
  components: {
    optionsItem,
  },
  inject: ["father"],
  props: {
    options: Array,
  },
  computed: {
    commonOptions: {
      get() {
        return this.father.component.__commonOptions__;
      },
      set(val) {
        this.father.component.__commonOptions__ = val;
      },
    },
  },
  methods: {
    getPoint(type) {
      if (type === "width" || type === "left") {
        return ((this.commonOptions[type] / 1440) * 100).toFixed(2) + "%";
      } else {
        return ((this.commonOptions[type] / 800) * 100).toFixed(2) + "%";
      }
    },
    getTag(d) {
      // d.format 需要自己写slot插槽
      // d.render formList.js 写入render
      // d.children 子组件，子节点
      // d.static 静态组件
      const flag1 = d.vModel;
      const flag2 = d.children && d.children.length > 0;
      if (d.format) {
        return this.$scopedSlots.default({ slotName: d.slotName, params: d });
      } else if (d.render) {
        return d.render;
      } else if (flag1 && flag2) {
        if (d.box) {
          let i = [];
          d.children.map((c) => {
            i.push(
              <c.tag {...{ attrs: c.options, on: this.getEvent(c) }}>
                {this.getTag(c)}
              </c.tag>
            );
          });

          return this.resultTag(d, i);
        } else {
          let i = [];
          const spliceTag = ["el-radio-group", "el-checkbox-group"];
          const label = spliceTag.includes(d.tag);
          d.children.map((c) => {
            i.push(
              <c.tag
                {...{ attrs: c.options, on: this.getEvent(c) }}
                slot={c.slot}
              >
                {label ? c.options.valued : ""}
                {c.text}
              </c.tag>
            );
          });
          return (
            <el-form-item
              label={d.label}
              label-width={d.label ? "90px" : "0px"}
            >
              {this.resultTag(d, i)}
            </el-form-item>
          );
        }
      } else if (!flag1 && flag2) {
        //只能是盒子组件
        let i = [];
        d.children.map((c) => {
          if (c.render) {
            i.push(c.render);
          } else if (c.format) {
            i.push(
              this.$scopedSlots.default({ slotName: c.slotName, params: c })
            );
          } else if (c.children) {
            i.push(this.getTag(c));
            // console.log(i);
          } else {
            i.push(
              <el-form-item
                label={c.label}
                label-width={c.label ? "90px" : "0px"}
              >
                {this.resultTag(c)}
              </el-form-item>
            );
          }
        });
        return <div class="children-box">{i}</div>;
      } else if (flag1 && !flag2) {
        return this.resultTag(d);
      } else if (!flag1 && !flag2) {
        return <d.tag {...{ attrs: d.options, on: this.getEvent(d) }}></d.tag>;
      } else if (d.children && d.children.length > 0) {
        // console.log(d);
      } else if (d.static) {
        return <d.tag {...{ attrs: d.options, on: this.getEvent(d) }}></d.tag>;
      } else {
        return "";
      }
    },
    getEvent(c) {
      // console.log(c.label);
      let event = {};
      if (c.event) {
        c.event.map((item) => {
          Object.assign(event, {
            [item.trigger]: (e) => {
              this.father[item.method](item.params || e);
            },
          });
        });
      }
      return event;
    },
    resultTag(d, slot = "") {
      if (!d.vModel) {
        return d.text;
      }
      const params = d.vModel.split(".");
      if (params[4]) {
        return (
          <d.tag
            v-model={
              this.father.component[params[0]][params[1]][params[2]][params[3]][
                params[4]
              ]
            }
            {...{ attrs: d.options, on: this.getEvent(d) }}
          >
            {slot}
          </d.tag>
        );
      } else if (params[3]) {
        return (
          <d.tag
            v-model={
              this.father.component[params[0]][params[1]][params[2]][params[3]]
            }
            {...{ attrs: d.options, on: this.getEvent(d) }}
          >
            {slot}
          </d.tag>
        );
      } else if (params[2]) {
        return (
          <d.tag
            v-model={this.father.component[params[0]][params[1]][params[2]]}
            {...{ attrs: d.options, on: this.getEvent(d) }}
          >
            {slot}
          </d.tag>
        );
      } else if (params[1]) {
        return (
          <d.tag
            v-model={this.father.component[params[0]][params[1]]}
            {...{ attrs: d.options, on: this.getEvent(d) }}
          >
            {slot}
          </d.tag>
        );
      } else if (params[0]) {
        return (
          <d.tag
            v-model={this.father.component[params[0]]}
            {...{ attrs: d.options, on: this.getEvent(d) }}
          >
            {slot}
          </d.tag>
        );
      } else {
        return (
          <d.tag v-model={this.father} {...{ attrs: d.options }}>
            {slot}
          </d.tag>
        );
      }
    },
  },
  render() {
    const c = (
      <div>
        {this.options.map((item) => {
          return (
            <el-form-item
              label={item.children ? "" : item.label}
              label-width={item.children ? "0px" : "90px"}
            >
              {item.children ? <div>{item.label}</div> : ""}
              {item.type === "layout" ? (
                <div>
                  <el-input-number
                    v-model={this.commonOptions[item.param]}
                    controls-position="right"
                    step={1}
                    max={9999}
                    min={0}
                  ></el-input-number>
                  <span style="margin-left:10px;">
                    布局比 {this.getPoint(item.param)}
                  </span>
                </div>
              ) : (
                this.getTag(item)
              )}
            </el-form-item>
          );
        })}
      </div>
    );
    return c;
  },
};
</script>

<style lang="scss" scoped>
.children-box {
  padding: 10px;
  background-color: #393e4c;
  .el-form-item {
    margin-bottom: 10px;
  }
}
</style>